import React, { Component, Fragment } from "react";
import Header from './components/Header'
import Lists from './components/Lists'
import { Card, Radio, message } from 'antd'
import './App.css'
const { Meta } = Card;
let result = []
export default class App extends Component {
  state = { login: false }
  onChange = (e) => {
    let timer
    clearTimeout(timer);
    timer = setTimeout(() => {
      if (result.length === 9) {
        message.success('牛莉哇，恭喜闯关成功登入梦龙龙');
        this.setState({ login: true })
      }
    }, 1000)
    if (e.target.value === '1') {
      message.warning('暂且饶你一命');
      result.push(e.target.value)
    } else {
      message.error('low逼，睁大眼睛看看这是谁重新选');
      clearTimeout(timer)
      setTimeout(() => { window.location.reload() }, 500)
    }

    console.log(result);
  }
  render () {
    return (
      <Fragment>
        {
          this.state.login ?
            <div><Header /><Lists /></div> :
            <div style={{ fontSize: 24 + 'px' }}>
              <ul style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-around", alignItems: "center" }}>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/9c6431b000bffed3517bbaa14f32ecb.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="2">老狗</Radio.Button>
                      <Radio.Button value="1">老板</Radio.Button>
                      <Radio.Button value="3">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/83B763C448730ACC7ED75040FEE588F1.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="2">老狗</Radio.Button>
                      <Radio.Button value="3">熊熊</Radio.Button>
                      <Radio.Button value="1">老板</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/fb418518f53a1b508baf33f40fb7092.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="2">老狗</Radio.Button>
                      <Radio.Button value="3">熊熊</Radio.Button>
                      <Radio.Button value="1">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/4F4EF360C1BB7D12E567645CB47CAADF.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="1">品子</Radio.Button>
                      <Radio.Button value="3">熊熊</Radio.Button>
                      <Radio.Button value="2">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/84f2aae93b4a2b0d5af3083c7e1000b.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="3">品子</Radio.Button>
                      <Radio.Button value="1">老狗</Radio.Button>
                      <Radio.Button value="2">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/2e0efcc7f6a692c4709b213dcefda08.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="3">品子</Radio.Button>
                      <Radio.Button value="1">熊熊</Radio.Button>
                      <Radio.Button value="2">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/f38ebcdf7832b73934186601960ee4b.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="1">品子</Radio.Button>
                      <Radio.Button value="3">老狗</Radio.Button>
                      <Radio.Button value="2">帅逼</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/8E87CC52AA5111A30A71687C37A9E5F0.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="3">狗+板</Radio.Button>
                      <Radio.Button value="2">帅+熊</Radio.Button>
                      <Radio.Button value="1">包+帅</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>
                <li style={{ marginTop: 20 + "px" }}>
                  <Card
                    hoverable
                    style={{ textAlign: "center", width: 300, height: 537, display: "flex", justifyContent: "center", flexWrap: "wrap" }}
                    cover={<img style={{ height: 398 }} alt="example" src="https://gitee.com/wang1778652764/my_pic_public/raw/master/6A81B7E5A78E24F85CDAFAD899549D01.jpg" />}
                  >
                    <Meta title="判断这是谁？" description="选择正确的一项" />
                    <Radio.Group buttonStyle="solid" className="Radio" onChange={this.onChange}>
                      <Radio.Button value="1">老板</Radio.Button>
                      <Radio.Button value="2">包包</Radio.Button>
                      <Radio.Button value="3">熊熊</Radio.Button>
                    </Radio.Group>
                  </Card>
                </li>

              </ul>
            </div>
        }
      </Fragment>
    )

  }
}